<template>
    <span ref="word" :style="{
        // 有角标的时候右边留宽
        paddingRight: paddingRight(rowItem),
        // 定位相关
        left: rowItem.left || 'auto',
        right: rowItem.right || 'auto',
        top: rowItem.top || 'auto',
        bottom: rowItem.bottom || 'auto',
    }">
        <!-- 上边 -->
        <div v-if="!!rowItem.topContent" class="tag-top" v-html="rowItem.topContent"
            :style="{ lineHeight: rowItem.tagLineHeight || 1 }"></div>
        <!-- 右上角 -->
        <span v-if="!!rowItem.super" class="tag-super" v-html="rowItem.super"
            :style="{ top: tagOffset, right: tagRight(rowItem, 1) }"></span>
        <span v-html="rowItem.content || ''" :class="[arrPosition.find(tItem => rowItem.position == tItem) || '']" :style="{
            // 缩放、倾斜
            transform: 'scale(' + (rowItem.scale || 1) + ')  skewX(' + (rowItem.skew || '0') + ')',
            // 间距
            margin: rowItem.margin || 'auto',
            padding: rowItem.padding || 'auto',
            // 颜色
            color: rowItem.color || 'inherit',
            // 字号
            fontSize: rowItem.fontSize || 'inherit',
            // 字重
            fontWeight: rowItem.fontWeight || 'inherit',
        }">
        </span>
        <!-- 左下角 -->
        <span v-if="!!rowItem.sub" class="tag-sub" v-html="rowItem.sub"
            :style="{ bottom: tagOffset, right: tagRight(rowItem) }"></span>
        <!-- 下边 -->
        <div v-if="!!rowItem.bottomContent" class="tag-bottom" v-html="rowItem.bottomContent"
            :style="{ lineHeight: rowItem.tagLineHeight || 1 }"></div>
    </span>
</template>

<script setup>
// 定位选项
const arrPosition = ref(['normal', 'top', 'bottom']);

const props = defineProps({
	// 角标偏移值
	tagOffset: {
		type: String,
		default: () => '-3px'
	},
    // 多行
    rowItem: {
        type: Object,
        default: () => { }
        // {
        //     content: 's',
        //     // 位置, 可选值: normal(正常),bottom(左下),top(右上)
        //     position: 'normal',
        //     // 缩放倍数, Number: 1(不缩放),0.5(缩小一半),2(放大2倍)
        //     scale: 1,
        //     // 颜色, 默认:inherit(继承),initial(初始), ...
        //     color: 'inherit',
        //     // 字号, 默认:inherit(继承), 单位:px
        //     fontSize: 'inherit',
        //     // 渲染头部内容
        //     topContent: 'n',
        //     // 渲染底部内容
        //     bottomContent: 'i=s',
        //     // 头部、底部内容行高，默认：1
        //     tagLineHeight: '1',
        // }
    }
});

// 右边距
function paddingRight(item) {
    let padding = '0';
    if (item && (item.sub || item.super)) {
        const subLength = (item.sub || '').toString().length;
        const superLength = (item.super || '').toString().length;
        // 取上下标的最大长度
        const len = subLength > superLength ? subLength : superLength;
        padding = len * 8 + 'px'
    }
    return padding;
}
// 上\下标距右侧距离
function tagRight(item, isSuper) {
    let right = '0';
    if (item) {
        const subLength = (item.sub || '').toString().length;
        const superLength = (item.super || '').toString().length;
        // 取上下标的最大长度
        const len = subLength > superLength ? subLength : superLength;
        if (isSuper) {
            right = (len - superLength) * 8 + 'px'
        } else {
            right = (len - subLength) * 8 + 'px'
        }
    }
    return right;
}

// 公式对象
const word = ref();
defineExpose({
    word
});
</script>

<style scoped lang="scss">
span {
    position: relative;
    z-index: 100;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

// 上标、下标
.tag-top,
.tag-bottom {
    position: relative;
    transform: scale(0.6);
    line-height: 1;
}

// 右上角
.tag-super {
    position: absolute;
    right: 0;
    font-size: x-small;
}

// 左下角
.tag-sub {
    position: absolute;
    right: 0;
    font-size: x-small;
}

// 右上
.top {
    margin-top: -10px !important;
    vertical-align: super !important;
}

// 左下
.bottom {
    margin-bottom: -10px !important;
    vertical-align: sub !important;
}

// 根号
.radical-sign {
    position: relative;
    border-top: 1px solid #666666;
    border-left: 1px solid #666666;
    padding: 0 5px;
    transform: skewX(-6deg);
}
.radical-sign::before {
    content: "＜";
    font-size: 20px;
    position: absolute;
    bottom: 3px;
    left: -19px;
    transform: rotate(82deg) skew(300deg);
}
</style>
